import React, { useEffect, useState } from "react";
import { View, Text, FlatList, Image, TouchableOpacity, StyleSheet, Button } from "react-native";
import Adapt from '../../ulits/Adapt';
import { List } from "../../ulits/instance";
import axios from "axios";
const tabs = ["推荐", "关注"];
import AsyncStorage from '@react-native-async-storage/async-storage';

export default function LiveStreaming({navigation}) {
  const [activeTab, setActiveTab] = useState(0);
  const [DATA,setDATA]=useState([])
  let get_list=async()=>{
    let {list}=await List()
    console.log(list);
    setDATA(list)
  }
  useEffect(() => {
    get_list()
  }, [])
  
  const renderItem = ({ item }: any) => (
    <TouchableOpacity  style={styles.card} onPress={()=>{navigation.navigate('Watch', { roomId:item.username });}}>
      <Image source={{ uri: item.img }} style={styles.cover} />
      <View style={styles.statusRow}>
        <View style={[styles.statusIcon, { backgroundColor: item.live != null ? '#FF9800' : '#BDBDBD' }]} />
        <Text style={styles.viewers}>人</Text>
      </View>
      <View style={styles.infoOverlay}>
        <View style={styles.userRow}>
          <Image source={{ uri: item.img }} style={styles.avatar} />
          <Text style={styles.name}>{item.username}</Text>
        </View>
      </View>
    </TouchableOpacity >
  );

  return <>
  <View style={styles.container}>
      {/* 顶部Tab */}
      <View style={styles.tabRow}>
        {tabs.map((tab, idx) => (
          <TouchableOpacity key={tab} onPress={() => setActiveTab(idx)}>
            <Text style={[styles.tabText, activeTab === idx && styles.tabActive]}>{tab}</Text>
          </TouchableOpacity>
        ))}
      </View>
      {/* 卡片列表 */}
      {activeTab == 0 ? <FlatList
        data={DATA.filter(i=>i.live != null)}
        renderItem={renderItem}
        keyExtractor={item => item}
        numColumns={2}
        columnWrapperStyle={styles.row}
        contentContainerStyle={styles.listContent}
        showsVerticalScrollIndicator={false}
      /> : <FlatList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={item => item}
        numColumns={2}
        columnWrapperStyle={styles.row}
        contentContainerStyle={styles.listContent}
        showsVerticalScrollIndicator={false}
      />}
      <View style={[styles.button]}>
            <Text style={{textAlign:'center'}} onPress={()=>navigation.navigate('Live_Open')}>＋</Text>
      </View>
    </View>
    
  </>
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    paddingTop: Adapt.getStatusBarHeight() + Adapt.adapt(10),
  },
  tabRow: {
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'center',
    paddingHorizontal: Adapt.adapt(20),
    marginBottom: Adapt.adapt(10),
  },
  tabText: {
    fontSize: Adapt.adaptFontSize(18),
    color: '#888',
    marginRight: Adapt.adapt(24),
    fontWeight: '500',
    paddingBottom: Adapt.adapt(6),
  },
  tabActive: {
    color: '#222',
    borderBottomWidth: Adapt.adapt(3),
    borderBottomColor: '#FF9800',
  },
  listContent: {
    paddingHorizontal: Adapt.adapt(10),
    paddingBottom: Adapt.getBottomSafeHeight() + Adapt.adapt(10),
  },
  row: {
    justifyContent: 'space-between',
    marginBottom: Adapt.adapt(16),
  },
  card: {
    width: (Adapt.getScreenWidth() - Adapt.adapt(30)) / 2,
    borderRadius: Adapt.adaptRadius(12),
    overflow: 'hidden',
    backgroundColor: '#f7f7f7',
    marginBottom: Adapt.adapt(8),
  },
  cover: {
    width: '100%',
    height: Adapt.adaptHeight(160),
    resizeMode: 'cover',
  },
  statusRow: {
    position: 'absolute',
    top: Adapt.adapt(8),
    left: Adapt.adapt(8),
    flexDirection: 'row',
    alignItems: 'center',
    zIndex: 2,
  },
  statusIcon: {
    width: Adapt.adapt(22),
    height: Adapt.adapt(22),
    borderRadius: Adapt.adapt(11),
    marginRight: Adapt.adapt(4),
  },
  viewers: {
    color: '#fff',
    fontSize: Adapt.adaptFontSize(12),
    backgroundColor: 'rgba(0,0,0,0.3)',
    borderRadius: Adapt.adapt(8),
    paddingHorizontal: Adapt.adapt(6),
    paddingVertical: Adapt.adapt(2),
  },
  infoOverlay: {
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: 'rgba(0,0,0,0.45)',
    padding: Adapt.adapt(8),
  },
  title: {
    color: '#fff',
    fontSize: Adapt.adaptFontSize(15),
    fontWeight: 'bold',
    marginBottom: Adapt.adapt(6),
  },
  userRow: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  avatar: {
    width: Adapt.adapt(22),
    height: Adapt.adapt(22),
    borderRadius: Adapt.adapt(11),
    marginRight: Adapt.adapt(6),
    borderWidth: 1,
    borderColor: '#fff',
  },
  name: {
    color: '#fff',
    fontSize: Adapt.adaptFontSize(13),
  },
  button: {
    width:Adapt.adapt(50),
    position:'fixed',
    left:Adapt.adaptMargin(Adapt.getScreenWidth()/2-Adapt.adapt(50)/2),
    borderRadius:Adapt.adaptRadius(Adapt.adapt(50)/2),
    display:"flex",
    justifyContent:'center',
    alignContent:"center",
    backgroundColor: 'red',
    height: Adapt.adaptHeight(50),
  },
});